<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="music.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body,html
    {
	background-color: #cccccc;
    height: 100%;
    }
    .big_bg
    {
        height: 100%;
        background-size: contain;
        background-color:rgba(0,0,0,0.2); 
    }
    </style>
    <script>
    $(function(){
        
        var myAudio = $("audio")[0];
        var flag=0;
        $(".big_bg").css("background-image","url(\""+$("source").eq((flag)%3).attr("title")+".JPG"+"\")");
        $("#song_name").text($("source").eq((flag)%3).attr("title").split(" - ")[1]);
        $("#singer").text($("source").eq((flag)%3).attr("title").split(" - ")[0]);
       $("#play").click(function()
       {
      
        $("#play").toggleClass("iconfont play");
        $("#play").toggleClass("iconfont pause");
        if(myAudio.paused)
        {
            myAudio.play();
        }
        else
        {
            myAudio.pause();
        }
        //    console.log($("#play").css("content"));
        //     var play_status=$("#play").css("content");
        //     if(play_status == "\e6a4")
        //     {
        //         $("#play").css("content","\e6a5");
        //     }
        //     else
        //     {
        //         $("#play").css("content","\e6a4");          
        //     }
       });
    $("#next").click(function ()
     {
         flag=flag+1;
        $("audio").eq(0).attr("src",$("source").eq((flag+1)%3).attr("src"));
        myAudio.play();
        $("#song_name").text($("source").eq((flag)%3).attr("title").split(" - ")[1]);
        $("#singer").text($("source").eq((flag)%3).attr("title").split(" - ")[0]);
        // console.log( $("source").eq((flag)%3).attr("title")+".JPG");
        $("#bg_img img").attr("src",$("source").eq((flag)%3).attr("title")+".JPG");
        $(".big_bg").css("background-image","url(\""+$("source").eq((flag)%3).attr("title")+".JPG"+"\")");
        console.log("url(\""+$("source").eq((flag)%3).attr("title")+".JPG"+"\")");
        console.log($("body").css("background-image"));
     });

     $("#pre").click(function ()
     {
         flag=flag+2;
        $("audio").eq(0).attr("src",$("source").eq((flag)%3).attr("src"));
        myAudio.play();
        $("#song_name").text($("source").eq((flag)%3).attr("title").split(" - ")[1]);
        $("#singer").text($("source").eq((flag)%3).attr("title").split(" - ")[0]);
        console.log( $("source").eq((flag)%3).attr("title")+".JPG");
        $(".big_bg").css("background-image","url(\""+$("source").eq((flag)%3).attr("title")+".JPG"+"\")");
     });
    });
  
    
    </script>
    <title>Document</title>
</head>
<body>
    <div class = "big_bg">
        <div class="music_player">   
                <audio id="audctrl">	
                    <source title="Eminem - Not Afraid" src="Eminem - Not Afraid">
                    <source title="Tizzy T,Fcyco,阿克江Akin - G.O.A.T(Tizzy T Version)" src="Tizzy T,Fcyco,阿克江Akin - G.O.A.T(Tizzy T Version).mp3">
                    <source title="Jeremy Zucker,blackbear - Talk Is Overrated" src="Jeremy Zucker,blackbear - Talk Is Overrated.mp3">
                </audio>
                <div id="bg_img">
                    <img src="Eminem - Not Afraid.JPG" alt="#">
                </div>
                <div class="music_info">
                    <p id="song_name">Song_Name</p>
                    <p id="singer">Singer</p>
                </div>
                <div class="music_button1">
                    <button id="share" class="iconfont share"></button>
                    <button id="like" class="iconfont like"></button>
                    <button id="list" class="iconfont song_list"></button>
                </div>
                <div class="progress">
                        <div class="progress-line">
                            <s class="progress-handle"></s>
                        </div>
                    </div>
                <div class="music_button2">
                        <button id="pre" class="iconfont pre_one"></button>
                        <button id="play" class="iconfont play"></button>
                        <button id="next" class="iconfont next_one"></button>
                </div>
        </div>
    </div>
</body>
<script>
</script>
</html>